<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            font-family: 微软雅黑;
        }

        /*头部样式*/
        #head {
            background-color: white;
            height: 120px;
            position: relative;
        }

        #head a {
            text-decoration: none;
        }

        #head_title {
            font-size: 32px;
            position: absolute;
            margin: 42px 40px;
            font-weight: bold;

        }

        #head_title a {
            color: #076ce0;
        }

        #head_menu {
            font-size: 16px;
            position: absolute;
            right: 103px;
            top: 51px;
        }

        #head_menu a {
            color: black;

        }

        #head_menu > div {
            float: left;
            margin: 0 20px;
        }

        /*图片*/
        #img {
            height: 300px;
            /* 设置背景图片 */
            background-image: url("../front/image/newsCenter/01.jpg");
            /* 设置图片尺寸: 宽 高  */
            background-size: 140% 300px;
            /* 禁止重复 */
            background-repeat: no-repeat;
        }

        /*选项*/
        #body_menu {
            height: 95px;
            padding: 32px 40px 0px 39px;
        }

        #body_menu > div {
            width: 130px;
            height: 44px;
            text-align: center;
            transition-duration: 0.5s; /*设置动画持续时间*/
        }

        #body_menu > div {
            float: left;
            margin-right: 21px;
        }

        #body_menu > div > span {
            line-height: 44px;
            color: white;
        }

        /*正文*/
        .content{
            height: 128px;
            margin: 20px;
            padding: 0 20px;
            position: relative;
            overflow: hidden;
        }
        .content a{
            text-decoration: none;
            color: black;
        }
        .content_time{
            width: 84px;
            height: 72px;
            background-color: #f2f2f2;
            text-align: center;
            padding-top: 12px;
            position: absolute;
        }
        .content_time>a{
            color: #666666;
        }
        .content_text_title{
            line-height: 25px;
            font-size: 14px;
        }
        .content_text_d{
            color: #666666;
            font-size: 12px;
            line-height: 25px;
        }
        .content_time_day{
            font-size: 23px;
        }
        .content_text{
            width: 80%;
            position: absolute;
            left: 140px;
        }

        .content_hr{
            margin: 125px 0;
        }
        /*底部*/
        #tail{
            height: 161px;
            background-color: rgba(23,23,23,0.85);
            position: relative;
            color: rgb(153, 153, 153);
        }
        #tail_address{
            position: absolute;
            left: 30px;
        }
        #tail_phone{
            position: absolute;
            left: 1060px;
            top: 70px;
        }
        #tail_img{
            position: absolute;
            left: 1000px;
            top: 70px;
        }
        #tail_phone>p{
            margin: 5px;
        }
        #tail_last{
            height: 21px;
            background-color: rgba(23,23,23,0.9);
            color: rgb(153, 153, 153);
            padding: 30px 30px;

        }
        #tail_last>span>a{
            text-decoration: none;
            color: rgb(153, 153, 153);
            font-size: 14px;
        }
        /*锚点 回到顶部*/
        #back_top{
            width: 42px;
            height: 42px;
            position: fixed;/*固定定位*/
            bottom: 55px;
            right: 65px;
            display: none;
        }
    </style>
</head>
<body>
<a href="" id="top1"></a>
<div id="bodyApp">
    <div id="head">
        <div id="head_title">
            <a href="./index">{{aboutUs.name}}</a>
        </div>
        <div id="head_menu">
            <div><a href="./index">首页</a></div>
            <div><a href="./breSources">业务资源</a></div>
            <div><a href="./keyServices">特色服务</a></div>
            <div><a href="./newsCenter" style="color: #076ce0">新闻中心</a></div>
            <div><a href="./aboutUs">关于我们</a></div>
        </div>
    </div>
    <div id="img"></div>
    <div id="body_menuApp">
        <div id="body_menu">
            <div id="body_menu_d0" @mousemove="fn($event)" style="background-color: #076ce0">
                <span id="body_menu_s1" style="color: white">行业资讯</span>
            </div>
            <div id="body_menu_d1" @mousemove="fn($event)" style="background-color: white">
                <span id="body_menu_s2" style="color: #666666">公司新闻</span>
            </div>
            <div id="body_menu_d2" @mousemove="fn($event)" style="background-color: white">
                <span id="body_menu_s3" style="color: #666666">新闻中心</span>
            </div>
        </div>
        <div class="content" v-for="n in news" v-show="n.type==type">
            <div class="content_time">
                <a :href="'./news?title='+n.title">
                    <span class="content_time_day" v-text="n.createtime.split('T')[0].split('-')[2]">23</span><br>
                    <span v-text="n.createtime.substr(0,7)">2017/10</span>
                </a>
            </div>
            <div class="content_text">
                <div class="content_text_title">
                    <a :href="'./news?title='+n.title" v-text="n.title">小区绊倒摔伤 物业是否担责</a>
                </div>
                <div class="content_text_d" v-text="n.summary">
                    “我父亲在小区里被绊倒摔伤，物业需要承担责任吗? ”近日 ， 望江县杨湾镇读者季先生
                    致电本报，向记者咨询道。据其介绍，今年8月17日，他的父亲在小区内散步时，被小区道路上一块凸起的地砖绊倒。
                </div>
            </div>
            <div class="content_hr">
                <hr style="border: none;border-top:1px dashed #ccc">
            </div>
        </div>
    </div>

    <div id="tail">
        <div id="tail_address">
            <p style="font-size: 26px;margin-bottom: 15px">Property Management</p>
            <p style="font-size: 13px">联系邮箱：{{aboutUs.email}}</p>
            <p style="font-size: 13px">联系地址：{{aboutUs.address}}</p>
        </div>
        <div id="tail_img">
            <img src="../front/image/aboutUs/03.png" alt="" height="45">
        </div>
        <div id="tail_phone">
            <p style="font-size: 14px">服务热线</p>
            <p style="font-size: 18px" v-text="aboutUs.telephone">000-000-0000</p>
        </div>
    </div>
    <div id="tail_last">
        <span><a href="/admin">登录管理</a></span>
    </div>
    <div id="back_top">
        <img src="../front/image/aboutUs/04.png" alt="">
    </div>
</div>
</body>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入JQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let v = new Vue({
        el: "#bodyApp",
        data: {
            news:[],
            type:0,
            aboutUs:{}
        },
        methods: {
            fn(e){
                /*获取调用了该方法的对象*/
                e = e.currentTarget;
                let children = document.getElementById("body_menu").children;
                for (const child1 of children) {
                    if(e.id==child1.id){
                        child1.style.backgroundColor = "#076ce0";
                        child1.children[0].style.color = "white";
                        v.type = e.id.substr(e.id.length-1).toString();
                    }else {
                        child1.style.backgroundColor = "white";
                        child1.children[0].style.color = "#666666";
                    }
                }
            },
            getNews:function () {
                axios({
                    url:'/f-news/getNews',
                    method:'GET',
                }).then(function (response) {
                    v.news = response.data;
                    console.log(v.news);
                })
            },
            info:function () {
                axios({
                    url:"/f-infocompany/aboutUs",
                    method:"get"
                }).then(function (response) {
                    v.aboutUs = response.data;
                    console.log(v.aboutUs);
                })
            }
        },
        created:function () {
            this.getNews();
            this.info();
        }
    })
    /*回到顶部*/
    $(function(){
        $(window).scroll(function(){  //只要窗口滚动,就触发下面代码
            var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
            if( scrollt >50 ){  //判断滚动后高度超过200px,就显示
                $("#back_top").slideDown(500); //淡入
            }else{
                $("#back_top").stop().slideUp(500); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动
            }
        });
        $("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
            $("html,body").animate({scrollTop:"0px"},200);
        });
    });
</script>
</html>